<!DOCTYPE html>
<html>
	<head>
		<!--
        	作者：刘开新
        	时间：2018-09-25
        	描述：
        -->
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css"  href="../../../base/plugins/layui/css/layui.css" media="all"/>
	</head>
	<body>
		<blockquote class="site-text layui-elem-quote">
		   <h3>操作日志</h3>
		</blockquote>
		 	
		<div class="layui-row">
			<div class="layui-col-md7">
				<div class="layui-form-item">
					<label class="layui-form-label">操作人</label>
					<div class="layui-input-inline">
						<input type="text" name="password"  placeholder="请输入操作人姓名" autocomplete="off" class="layui-input">
					</div>
					<button class="layui-btn">搜索</button>
				</div>
			</div>
			<hr/>
			<div class="layui-row">
				<form class="layui-form" action="">
				<table class="layui-table">
					<colgroup>
					<col width="150">
					<col width="150">
					<col width="200">
					<col width="130">
					<col width="200">    
					</colgroup>
					<thead>
						<tr>
						    <th>账号</th><th>姓名</th><th>ip</th><th>操作时间</th><th>模块</th><th>功能</th><th>操作内容</th>
						</tr> 
					</thead>
					<tbody>
						<tr>
						    <td>zhangsan</td>
						    <td>张三</td>
						    <td>127.0.0.1</td>
						    <td>2016-11-29</td>
						    <td>登陆日志</td>
						    <td>查询</td>
						    <td></td>
						</tr>
					</tbody>
				</table>
				<div id="test1"></div>
				</form>	
			</div>
		 </div>
		 
		 
		 
		<script src="../../../base/js/jquery-1.11.3.min.js"> </script>
		<script src="../../../base/plugins/layui/layui.js"></script>
		
		<script type="text/javascript">
			
			layui.use(['element','form','laypage'], function() {
			var laypage = layui.laypage;
			var tato;
				
			function jsondata(page,row) {
				$.ajax({
					type: "get",
					url: "http://127.0.0.1:8080/studentDemo/demo/findPageData",
					async: false,
					data:{
						"page":page,
						"rows":row
					},
					"beforSend":function(){
						index=layer.load(1,{
							shade:[0.5,"red"]
						});
					},
					"success": function(result) {
						
						if(result.code==0){
							mydata(result);
							
							tato=result.data.total;
								//执行一个laypage实例
						  	
							xuanran();
						}else{
							layer.msg("服务器错误，请稍后登录")
						}
						
					}
				});


				function mydata(result) {
					if(result.code == 0) {
						$.each(result.data.list, function(infoIndex, info) {
							//遍历ajax中的数据，infoIndex是第几个对象，返回的是一个数字，info返回的是对象
							
							var account = info["user_account"];
							var ip = info["request_ip"];
							var day = new Date(parseInt(info["login_date"])).toLocaleString();
							//解析json中的date数据，变成String格式
							if(info["type"] == 0) {
								var liexin = "PC端";
							} else if(info["type"] == 1) {
								var liexin = "Android端";
							}
							if(info["state"] == 1) {
								var state = "登录成功";
							} else {
								var state = "登录失败";
							}
							var model = info["model_number"];
							var td = "<tr></tr>";
							var did="<td>" + info.user_id+ "</td>"
							var daccount = "<td>" + account + "</td>";
							var dip = "<td>" + ip + "</td>";
							var dday = "<td>" + day + "</td>";
							var dliexin = "<td>" + liexin + "</td>";
							var dstate = "<td>" + state + "</td>";
							var dmodel = "<td>" + model + "</td>";
							$("tbody").append(td).append(did,daccount, dip, dday, dliexin, dstate, dmodel);
						});
					}
				}

					function xuanran() { //这里是给layui从新渲染一遍	
						var element = layui.element;
						element.init();
						var form = layui.form;
						form.render();
					}
				}
				jsondata(2,10);
				laypage.render({
					elem: 'test1' ,//注意，这里的 test1 是 ID，不用加 # 号,绑定页面节点id，只能绑定id
					count: tato,//数据总数，从服务端得到
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
					jump:function(obj,first){  //当前分页执行成功的回调函数
						//obj.curr当前页面   obj.limit当前页所容纳的最大条数
						$("tbody").empty();
						jsondata(obj.curr,obj.limit);	
						
					}
				});
			});
		</script>
	</body>
</html>